<template>
	<view class="container">
		<!-- 头像 -->
		<view class="cover">
			<view class="avatar">
				<!-- #ifdef H5 || APP-PLUS -->
				<u-image width="100%" height="200px" src="/static/images/cover.jpg"></u-image>
				<!-- #endif -->
			</view>
			<view class="nickname">注册新账号</view>
		</view>
		<view class="profile">
			<u--form :model="bind" labelPosition="left" ref="uForm" :errorType="errorType" :rules="rules">
				<!-- 邮箱 -->
				<u-form-item label="邮箱" prop="email">
					<u--input v-model="bind.email" placeholder="请输入邮箱"></u--input>
				</u-form-item>

				<!-- 密码 -->
				<u-form-item label="密码" prop="password">
					<u--input password v-model="bind.password" placeholder="请输入密码"></u--input>
				</u-form-item>

				<!-- 提交按钮 -->
				<u-button @click="submit" style="margin-bottom: 10px;" class="btn-style" type="primary" shape="circle" text="注册"></u-button>
				
				<!-- 注册-->
				<u-button @click="ToRegister"  type="success"  style="margin-bottom: 10px;" shape="circle" text="登陆"></u-button>
			</u--form>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bind: {
					email: '',
					password: null
				},
				errorType: 'toast',
				rules: {
					email: [{
						required: true,
						type: 'email',
						message: '请输入邮箱',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}]
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			async submit() {
				this.$refs.uForm.validate().then(async (valid) => {
					if (!valid) {
						//表单没通过，消息提醒
						this.$refs.uToast.show({
							type: 'error',
							message: '资料填写有误请仔细检查'
						})

						return false
					}

					let data = {
						email: this.bind.email,
						password: this.bind.password,
					}

					let result = await this.$u.api.user.userregister(data)

					if (result.code == '1') {

						//提醒，返回上一个界面
						this.$refs.uToast.show({
							message: result.msg,
							type: 'success',
							complete: () => {
								uni.$u.route({
									url: 'pages/user/login'
								})
							}
						})

					} else {
						this.$refs.uToast.show({
							type: 'error',
							message: result.msg
						})
						return false
					}
				})
				.catch(errors => {})
			},
			ToRegister(){
				uni.$u.route({
					url: 'pages/user/login'
				})
			}
		}
	}
</script>

<style>
	.cover {
		width: 100%;
		background: #fff;
		position: relative;
		padding: 5vh 0vh;
		text-align: center;
		z-index: 0;
	}

	.avatar {
		width: 12vh;
		height: 12vh;
		margin: 0 auto;
		border-radius: 100px;
		overflow: hidden;
		margin-bottom: 3vh;
	}

	.profile {
		margin-top: 3vh;
		background: #fff;
		padding: 0vh 2vh;
		text-align: center;
	}
</style>
